<template>
	<view class="shop-cart">
			<!-- 自定义导航栏 -->
			<uniNavBar
				title='购物车' 
				:leftIcon="isDetial?'left':''"
				:leftText=" isDetial?'返回':''"
				:right-text=' isNavBar?"完成":"编辑"   ' 
				fixed='true'
				status-bar='true'
				@clickRight='  isNavBar = !isNavBar  '
				@clickLeft="Back"
			></uniNavBar>
			<template v-if="list.length>=1">
			<!-- 内容快部分 -->
			<view class="shop-list">
				<view class="shop-item" v-for="(item,index) in list" :key="index" @tap='selectedItem(index)'>
					<label class="radio">
						<radio value="" color="#FF3333" :checked="item.checked"/>
						<image class="shop-img" :src="item.imgUrl" mode=""></image>
					</label>
					<view class="shop-text">
						<text class="shop-name">{{item.name}}</text>
						<view class="shop-price">
							<text class="money">￥{{item.pprice}}</text>
							<template>
								<uniNumberBox
								v-model="item.num"
								:min='1'
								@change='changeNumber($event,index,item)'
								>
								</uniNumberBox>
							</template>
						</view>
					</view>
				</view>
			</view>
			<view class="">
				
			</view>
			<!-- 底部 -->
			<view class='shop-foot'>
				<!-- 全选按钮 -->
				<label class="foot-radio" @tap='checkedAllFn'>
					<radio value="" color='#FF3333' :checked="checkedAll"/><text>全选</text>
				</label>
				
				<!-- 合计 -->
				<view class="foot-total" v-if="!isNavBar">
					<view class="foot-count">合计：<text style="color: red;">￥{{totalCount.pprice}}</text></view>
					<view class="sub" @tap="goConfirmOrder">结算({{totalCount.num}})</view>
				</view>
				
				<!-- 删除订单 -->
				<view class="delOrder" v-else @tap="delGoodsFn">删除</view>
			</view>
		</template>
		<template v-else>
			<view class='shop-else-list'>
				<view class="shop-else-list-item">
					<text>囧～购物车里还是空空如也哦~~</text>
					<text>快去添加你喜欢的商品吧！</text>
				</view>
			</view>
		</template>
		<Tabbar cureentPage="shopcart"></Tabbar>
	</view>
</template>

<script>
	import uniNavBar from '@/components/uni/uni-nav-bar/uni-nav-bar.vue'
	import uniNumberBox from '@/components/uni/uni-number-box/uni-number-box.vue'
	import {mapState,mapActions,mapGetters,mapMutations} from 'vuex'
	import Tabbar from '../../components/common/TabBar.vue'
	import $http from '../../common/api/request.js'
	export default {
		data() {
			return {
				isNavBar:false,
				isDetial:false,
				shopNumber:1,
				pageType:''
			}
		},
		computed:{
			...mapState({
				list:state=>state.cart.list,
				selectedList:state=>state.cart.selectedList
			}),
			...mapGetters(['checkedAll','totalCount']),

		},
		components:{
			uniNavBar,
			uniNumberBox,
			Tabbar
		},
		onLoad(e) {
			this.getCartDate()
			this.pageType = e.pageType
			if(e.pageType == 'detial'){
				this.isDetial = true
			}
		},
		onShow() {
			this.getCartDate()
		},
		methods: {
			...mapActions(['checkedAllFn','delGoodsFn','totalCountFn']),
			...mapMutations(['selectedItem','initGetData','initOrder']),
			// 获取购物车数据
			getCartDate(){
				$http.request({
					url:"/selectCart",
					method:"POST",
					header:{
						token:true
					}
				}).then((res)=>{
					this.initGetData(res);
				}).catch(()=>{
					uni.showToast({
						title:'请求失败',
						icon:'none'
					})
				})
			},
			// 修改商品数量
			changeNumber(value,index,item){
				$http.request({
					url:"/updateNumCart",
					method:"POST",
					header:{
						token:true
					},
					data:{
						goodsId:item.goods_id,
						num:value
					}
				}).then((res)=>{
					this.list[index].num = value;
				}).catch(()=>{
					uni.showToast({
						title:'请求失败',
						icon:'none'
					})
				})
			},
			// 返回上一页，switchTab会将页面全部关闭，所以前提是要自定义底部导航栏
			Back(){
				uni.navigateBack({
					delta:1
				})
			},
			// 提交订单 跳转到订单页面
			goConfirmOrder(){
				if(this.selectedList.length>=1){
					uni.navigateTo({
						url:`/pages/confirm-order/confirm-order?selectedList=${JSON.stringify(this.selectedList)}`
					})
				}else {
					uni.showToast({
						title:"亲，您的订单还没有选择哦！",
						icon:"none"
					})
				}
			}
		}
	}
</script>

<style scoped>
.shop-cart {
	padding-bottom: 80rpx;
}
.shop-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1rpx solid #e1e1e1;
}
.radio {
	padding: 15rpx;
	width: 220rpx;
	height: 150rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.shop-img{
	width: 150rpx;
	height: 150rpx;
}
.shop-text{
	flex: 1;
	height: 150rpx;
	padding: 15rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.shop-price {
	display: flex;
	justify-content:space-between;
	align-items: center;
}
.shop-foot{
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: #f4f5f6;
	padding-bottom: 122rpx;
}
.foot-total {
	width: 50%;
	height: 80rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.sub {
	display: flex;
	justify-content: center;
	align-items: center;
	color: white;
	width: 50%;
	height: 100%;
	background-color: red;
}
.delOrder {
	display: flex;
	justify-content: center;
	align-items: center;
	color: white;
	width: 20%;
	height: 80rpx;
	background-color: red;
}
.shop-else-list {
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	left:0;
	top:0;
	right:0;
	bottom:0;
	background-color: #F7F7F7;
}
.shop-else-list-item {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
</style>
